<template>
  <view class="contain">
    <!-- 应用application -->
    <!-- 分类导航区域 -->
    <view class="nav-list">
      <view v-for="(item, i) in navList" :key="i" @click="navClickHandler(item)" class="nav-item">
        <image :src="item.image_src" class="nav-img"></image>
      </view>
    </view>
    <view class="middle"> 今日数据 </view>
    <view class="bottom">
      <view v-for="(item, i) in bottom" :key="i" @click="showDayCountTab(i)">
        <view class="item">
          <view class="val">
            {{ item.val }}
          </view>
          <view class="name">
            {{ item.name }}
          </view>
        </view>
      </view>
    </view>
    <view v-show="activeCount == 1">
      <view class="equip-item-count-wrap" v-for="equipcount in equOperationLogList" :key="equipcount.equipType">
        <view class="equipname">{{ equipcount.equipName }}</view>
        <view class="count-listwrap">
          <view v-for="(count, i) in equipcount.operationList" :key="i" class="count-item"
            >{{ count.label }}:{{ count.value }}台</view
          >
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
import { getTodayTotal, countEquByTime } from '@/api/home';
import { equipOperateCountList } from '@/api/equip';
import { get_token } from '@/auth/token';
import { equOperationLogList } from './data';
export default {
  data() {
    return {
      navList: [
        {
          name: '入户调查',
          image_src: '/static/images/diaocha.png',
          url: '/pages/survey/survey',
        },
        {
          name: '设备安装',
          image_src: '/static/images/anzhuang.png',
          url: '/pages/equipmentInstallation/equipmentInstallation',
        },
        {
          name: '运维管理',
          image_src: '/static/images/guanli.png',
          url: '/pages/yunweiManage/yunweiManage',
        },
        {
          name: '设备出入库',
          image_src: '/static/images/churuku.png',
        },
      ],
      bottom: [
        {
          val: 0,
          name: '入户调查',
        },
        {
          val: 0,
          name: '设备安装',
        },
      ],
      equOperationLogList,
      activeCount: 1,
      areaId:null
    };
  },
  onShow() {
    this.init();
  },
  onLoad() {
    const _this = this
    uni.getStorage({
      key: 'areaId',
      success: function (res) {
        _this.areaId = res.data
      }
    });
  },
  methods: {
    showDayCountTab(i) {
      this.activeCount = i;
    },
    init() {
			this.bottom[1].val = 0
      const token = get_token();
      if (!token) {
        // 无token时进入小程序，重定向到登录页
        uni.navigateTo({
          url: '/pages/login/login',
        });
        return;
      }
      this.getStatisticsData();
      this.getEquipOperateCountList();
    },
    getStatisticsData() {
      // 今日
      const now = new Date();
      let month = now.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      let day = now.getDate() + 1;
      if (day < 10) {
        day = '0' + day;
      }
      const today = now.getFullYear() + '-' + month + '-' + day;
      const params = {
        createTimeSt: today + ' ' + '00:00:00',
        createTimeEd: today + ' ' + '23:59:59',
        areaId:this.areaId
      };
      // 获取设备安装数量
      // countEquByTime(params)
      //   .then((res) => {
      //     const tar = this.bottom.find((x) => x.name === '设备安装');
      //     if (tar) {
      //       tar.val = res.data.result || '0';
      //     }
      //   })
      //   .catch((err) => {});
      // 获取入户调查数量
      getTodayTotal(params)
        .then((res) => {
          const tar = this.bottom.find((x) => x.name === '入户调查');
          if (tar) {
            tar.val = res.data.result || '0';
          }
        })
        .catch((err) => {});
    },
    async getEquipOperateCountList() {
      const res = await equipOperateCountList();
			if(!res.data.success){
				return;
			}
      const countList = res.data.result;
      countList.map((arr) => {
        let equType = arr[0].equType;
        if (equType == 1) {
          this.setCountOfEquip(0, arr);
        } else if (equType == 2) {
          this.setCountOfEquip(5, arr);
        } else if (equType == 3) {
          this.setCountOfEquip(3, arr);
        } else if (equType == 4) {
          this.setCountOfEquip(2, arr);
        } else if (equType == 5) {
          this.setCountOfEquip(1, arr);
        } else if (equType == 6) {
          this.setCountOfEquip(4, arr);
        } else if (equType == 7) {
          this.setCountOfEquip(6, arr);
        }
      });
    },
    setCountOfEquip(i, arr) {
      const operation0 = arr.find((item) => item.operateType == 2); // 拆除
      const operation1 = arr.find((item) => item.operateType == 1); // 新增
      const operation2 = arr.find((item) => item.operateType == 3); // 更换
      const operation3 = arr.find((item) => item.operateType == 6); // 检测
			const operation1Count =  operation1 ? operation1.operateNum : 0;
			const operation2Count =  operation2 ? operation2.operateNum : 0;
      this.equOperationLogList[i].operationList[0].value = operation0 ? operation0.operateNum : 0;
      this.equOperationLogList[i].operationList[1].value = operation1Count
      this.equOperationLogList[i].operationList[2].value = operation2Count
      this.equOperationLogList[i].operationList[3].value = operation3 ? operation3.operateNum : 0;
			const totalAdd = operation1Count+operation2Count;
			this.bottom[1].val += totalAdd || 0;
    },
    // nav-item 项被点击时候的事件处理函数
    navClickHandler(item) {
      if (!item.url) {
        // uni.showToast({
        // 	title:'正在开发中',
        // 	icon:'error'
        // })
        this.$refs.uToast.show({
          message: '正在开发中',
          type: 'warning',
          complete() {
            // params.url && uni.navigateTo({
            // 	url: params.url
            // })
          },
        });
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
      // 判断点击的是哪个 nav
      // if (item.name === '入户调查') {
      //  this.$refs.uToast.show({
      //    message: "正在开发中"
      // })
    },
  },
};
</script>
<style lang="scss">
.contain {
  padding: 30rpx;

  .nav-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;

    .nav-item {
      width: 48.5%;
      height: 160rpx;
      margin-bottom: 20rpx;
    }

    .nav-img {
      height: 100%;
      width: 100%;
    }
  }

  .middle {
    margin: 20rpx 0;
    font-weight: 600;
    font-size: 32rpx;
    color: #000000e6;
  }

  .bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 140rpx;
    background: #e2effe;
    border-radius: 16rpx;

    .item {
      text-align: center;

      .val {
        font-weight: 500;
        font-size: 40rpx;
        color: #3576f2;
      }

      .name {
        font-weight: 500;
        font-size: 30rpx;
        color: #00000099;
      }
    }
  }
}

.equip-item-count-wrap {
  padding: 8rpx 0;
  color: #999;

  .equipname {
    font-size: 36rpx;
    color: #333;
  }
}

.count-listwrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.count-item {
  min-width: 25%;
  font-size: 28rpx;
}
</style>
